<template>
  <!-- Vue绑定事件用v-on或@，原生微信小程序是绑定事件是用bind或bind: -->
  <scroll-view class="scroll" scroll-y v-if="recommends.length>0"
    @scrolltolower="handleTolower">
    <!-- 推荐列表 -->
    <view class="recommend-wrap">
      <navigator class="recommmend-item" v-for="item in recommends"
        :key="item.id" :url="`/pages/album/index?id=${item.target}`">
        <image :src="item.thumb" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 月份列表 -->
    <view class="months-wrap">
      <view class="months-title">
        <view class="months-title-info">
          <text class="months-info">
            <!-- &thinsp; 是小于一个字符的空格 -->
            <text>{{months.DD}}&thinsp;/</text> {{months.MM}}&thinsp;月
          </text>
          <text class="months-text">你负责美丽就好</text>
        </view>
        <view class="months-title-more">更多></view>
      </view>
      <view class="months-content">
        <view class="months-item" v-for="(item,index) in months.items"
          :key="item.id">
          <go-detail :list="months.items" :index="index">
            <image :src="item.thumb+item.rule.replace('$<Height>',360)"
              mode="aspectFill"></image>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 热门列表 -->
    <view class="hot-wrap">
      <view class="hot-title">
        <text>热门</text>
      </view>
      <view class="hot-content">
        <view class="hot-item" v-for="(item,index) in hot" :key="item.id">
          <go-detail :list="hot.items" :index="index">
            <image :src="item.thumb" mode="widthFix"></image>
          </go-detail>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from 'moment'
import goDetail from '@/components/GoDetail'
export default {
  data() {
    return {
      // 推荐列表
      recommends: [],
      // 月份
      months: [],
      // 热门
      hot: [],
      // 推荐接口请求参数
      params: {
        // 获取多少条数据
        limit: 30,
        // 关键字
        order: 'hot',
        // 跳过多少条数据
        skip: 0
      },
      // 是否还有下一页
      morePage: false
    }
  },
  components: {
    goDetail
  },
  mounted() {
    // 动态修改当前页面的标题
    uni.setNavigationBarTitle({
      title: '推荐'
    })
    // 获取数据
    this.getList()
  },
  methods: {
    // 获取接口数据
    getList() {
      this.request({
        url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',
        data: this.params
      }).then(res => {
        // 没有更多数据了
        if (res.res.vertical.length === 0) {
          this.morePage = false
          uni.showToast({
            title: '没有更多了~',
            icon: 'none'
          })
          return
        }

        // 第一次发送请求
        if (this.recommends.length === 0) {
          // 推荐数据
          this.recommends = res.res.homepage[1].items
          // 根据月份划分的数据
          this.months = res.res.homepage[2]
          // 时间戳改为 日 / 月
          this.months.MM = moment(this.months.stime).format('MM')
          this.months.DD = moment(this.months.stime).format('DD')
        }
        // 热门数据
        this.hot = [...this.hot, ...res.res.vertical]
      })
    },
    // 滚动条触底事件
    handleTolower() {
      /**
       * 1 判断是否还有下一页
       * 有：
       *  1.1 修改参数 skip+=limit
       *  1.2 重新发送请求 getList()
       *  1.3 请求成功 hot数据叠加
       * 无：提示用户“没有更多了”
       */
      if (this.morePage) {
        this.params.skip += this.params.limit
        this.getList()
      } else {
        // 弹窗提示
        // 没有更多数据时，要经过getList()才能修改hasMore的值，如果getList里没有判断显示  "没有更多"
        // 则再次触底时才会显示 "没有更多"
        // 所以第一次的 "没有更多了~" 需要在getList里判断显示
        uni.showToast({
          title: '没有更多了~',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 纵向滚动容器
.scroll {
  height: calc(100vh - 36px);
}

// 推荐
.recommend-wrap {
  display: flex;
  flex-wrap: wrap;
  .recommmend-item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
// 月份
.months-wrap {
  .months-title {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    .months-title-info {
      .months-info {
        color: $theme-color;
        font-size: 30rpx;
        font-weight: 550;
        text {
          font-size: 34rpx;
        }
      }
      .months-text {
        color: #666;
        margin-left: 10rpx;
        font-size: 30rpx;
        font-weight: 500;
      }
    }
    .months-title-more {
      color: $theme-color;
      font-size: 30rpx;
      font-weight: 500;
    }
  }
  .months-content {
    display: flex;
    flex-wrap: wrap;
    .months-item {
      width: 33.33%;
      border: 5rpx solid #fff;
    }
  }
}
// 热门
.hot-wrap {
  .hot-title {
    padding: 15rpx;
    text {
      padding-left: 15rpx;
      border-left: 10rpx solid $theme-color;
      font-size: 30rpx;
      font-weight: 600;
    }
  }

  .hot-content {
    display: flex;
    flex-wrap: wrap;
    .hot-item {
      width: 33.33%;
      border: 5rpx solid #ffffff;
    }
  }
}
</style>